<template>
  <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="分类" sub-title="" @back="jumpTo" />
  <div class="classify">
    <!-- 侧栏 -->
    <div class="detail-box">
      <aside class="aside">
      <ul>
        <li v-for="(item, i) in classifys" :class="index == i ? 'active' : ''"
        @click="tab(i,item.classify_text)">{{ item.classify_text }}</li>
      </ul>
    </aside>
    <section class="list">
      <!-- 列表 -->
      <a-list item-layout="horizontal" :data-source="data" :locale="{emptyText: '暂无该分类文章~'}">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta
              
              :description="`${item.article_address} ${item.article_author}`">
              <template #title>
                <RouterLink :to="{path: '/detail', query:{id: item.id,article_id: item.article_id}}">
                  {{ item.article_title }}
                </RouterLink>
              </template>
              <template #avatar>
                <a-avatar :src="item.article_src" />
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </section>
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, ref,watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { listClassifyFn, articleListFn } from '../api';
import { message } from 'ant-design-vue';
interface DataItem {
  article_address: string;
  article_author: string;
  article_content: string;
  article_create_time: string;
  article_hot: string|number;
  article_id: string;
  article_title: string;
  article_read: string | any ;
  article_src: string | any ;
  article_status: number;
  classify_text: string;
  classify_title: string;
  id: string;
}

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    let index : number | any= ref(0)

    const jumpTo = () => {
      router.go(-1)
    }


    let data = ref<DataItem[]>([]);

    let classify_text : any = ref('')
    
    classify_text.value = route.query.classify_text

    

    // 编写获取列表的方法
    const articleList = async (classify_text:string | any,page:number, pageSize: number) => {
      await articleListFn({classify_text,page,pageSize})
      .then(
        content=> {
           console.log(content)
           let {code, result} = content;
           if(code == 200) {
              data.value = result
           }
        }
      )
    }

    watch(classify_text, (nValue)=> {
       console.log('test')
        // console.log({classify_text: nValue})
        articleList(nValue,1,10)
    },{
      deep: true,
      immediate: true 
    })

    
    const tab = (num: number,classify_text:string)=> {
      index.value = num;
      articleList(classify_text,1,10)
    }

    // 格式化时间
    const formatime = (date: Date | string | any) => {
      if (date) {
        let dt = new Date(date);
        return dt.toLocaleDateString() + " " + dt.toLocaleTimeString();
      }
      else {
        return '0000-00-00 00:00:00';
      }
    }

    interface classifyItem {
      id?: string;
      classify_text: string;
      classify_src: string;
    }

    let classifys = ref<classifyItem[]>([])
    const listClassify = async () => {
      await listClassifyFn()
        .then(
          content => {
            // console.log('1.0',content)
            let { code, msg, result } = content;
            if (code == 200) {
              if (classify_text) {
                for (let i = 0; i < result.length; i++) {
                  // console.log("classify_text:",classify_text)
                  if (classify_text.value === result[i].classify_text) {
                    index.value = i;
                    break;
                  }
                }
              }
              classifys.value = result;
            }
            // console.log("msg:",msg)
          }
        )
    }

    listClassify();



    return {
      jumpTo,
      classifys,
      index,
      data,
      tab
    }
  }
}

</script>

<style lang="scss">
@import '../static/common/variable.scss';

.classify {
  width: 100%;
  // padding: $pad;
  height: calc(100% - 80px);
  font-size: 16px;
  position: absolute;
  top: 82px;
  left: 0;
  .detail-box {
    width: 100%;
    height: 100%;
    display: flex;
  }
  .aside {
    width: 90px;
    height: 100%;
    overflow: hidden;
    ul {
      height: 100%;
      background-color: #f0f0f0;
      overflow-y: auto;

      li {
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        border-bottom: 1px solid #fff;
        width: 100%;
      }

      .active {
        background-color: $bgColor;
        color: #fff;
      }
    }
  }
  .list {
    width: calc(100% - 90px);
  }
}

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
</style>
